<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      
      // const zoom = d3.zoom()
      //   .on('start',(e,d)=>{
      //     console.log('start',d,e);
      //   })
      //   .on('zoom',(e,d)=>{
      //     console.log('zoom',d,e);
      //   })
      //   .on('end',(e,d)=>{
      //     console.log('end',d,e);
      //   })
      //   .scaleExtent([0.5 , 2])
      //   .translateExtent([[-100,-100],[width+100,height+100]])
      //   .extent([[0,0],[width,height]])
      //   svg.call(zoom);


        // const domain = [10,20]
        // const range = [100,700]
        // const y = d3.scaleLinear()
        //   .domain(domain)
        //   .range([400,0])
        // const yAxis = d3.axisLeft(y)
        // svg.append('g').attr('transform','translate(100,100)')
        //   .call(yAxis)

        // const x = d3.scaleLinear()
        //   .domain(domain)
        //   .range(range)
        //   .nice()

        // const xAxis = d3.axisBottom(x);
        
        // const g = svg.append('g').attr('transform','translate(0,500)')
        //   .call(xAxis)

        // const zoom = d3.zoom()
        //   .scaleExtent([0.5,2])
        //   .translateExtent([[0,0],[width,0]])
        //   .extent([[0,0],[width,0]])
        //   // .on('zoom',(e,d)=>{
        //   //     console.log(e.transform);
        //   //     let nr = range.map(d=>e.transform.applyX(d))
        //   //     console.log(nr);
        //   //     g.transition()
        //   //       .duration(1000)
        //   //       .call(xAxis.scale(x.range(nr)))
        //   // })
        //   .on('zoom',(e,d)=>{
        //      g.call(xAxis.scale(e.transform.rescaleX(x)))
        //   })
        // svg.call(zoom)  


        svg.append("rect")
          .attr('x',0)
          .attr('y',0)
          .attr('width',200)
          .attr('height',200)

        const zoom = d3.zoom()
          .on('zoom',(e,d)=>{
            console.log(e.transform);
            svg.select('rect')
            .attr('x',e.transform.applyX(0))
            .attr('y',e.transform.applyY(0))
            .attr('width',200*e.transform.k)
            .attr('height',200*e.transform.k)
          })  

         svg.call(zoom) 

         setTimeout(() => {
           //zoom.translateBy(svg , 100 , 100) 
           //zoom.translateTo(svg,100,100,[400,300])
          //  zoom.scaleBy(svg,0.5,[400,300])
          //  zoom.scaleBy(svg,0.5,[400,300])
          //  zoom.scaleBy(svg,0.5,[400,300])

          //  zoom.scaleTo(svg,0.5,[400,300])
          //  zoom.scaleTo(svg,0.5,[400,300])
          //  zoom.scaleTo(svg,0.5,[400,300])

          const transform = d3.zoomIdentity 
              // .translate(100,100)
              .scale(0.5)
          console.log(transform);
          zoom.transform(svg,transform)


         },1000)
    </script>
  </body>
</html>
